/* pages/appointment/index.wxss */
.appointment {
  background: #FAF9FF;
  .page-content {
    padding:0 30rpx;
    width:100%;
    box-sizing: border-box;
    .top {
      position: relative;
      width: 100%;
      height: 170rpx;

      // .top-bg {
      //   width: 100%;
      //   height: 100%;
      // }

      .top-title {
        position: absolute;
        left: 0;
        width: 100%;
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;

        // border:1px solid red;
        .back {
          position: absolute;
          left: 10rpx;
        }
      }
    }
    .orange-text{
      color:#F49A55;
    }
    .order-content{
      background: linear-gradient(#F2F1FF,#FEFEFF);
      padding:30rpx;
      box-sizing: border-box;
      .top-line{
        display: flex;
        justify-content: space-between;
        .tixian-btn{
          padding:20rpx 50rpx;
          background-color: #009643;
          color:#fff;
          border-radius: 10rpx;
        }
      }
      .table-title{
        display: flex;
        font-size:32rpx;
        font-weight:600;
        margin:30rpx 0  150rpx 0;
        justify-content: space-between;
        view{
          width:30%;

        }
      }
      .service-btn{
        width:90%;
        margin:0 auto;
        height:90rpx;
        line-height:90rpx;
        border-radius: 50rpx;
        background-color: #4CB8FF;
        color:#fff;
        text-align: center;

      }
    }

  }
  .zan-dialog-mask{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:200;
    background:rgba(0,0,0,0.4);
    display: none;
  }
  .zan-dialog-container{
    padding:30rpx 50rpx;
    box-sizing: border-box;
    // width:100%;
    position:fixed;
    width:70%;
    border-radius: 10rpx;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:999;
    background-color: #fff;
    display: none;
  }
  .title-line{
    position:relative;
    .title{
      width:100%;
      text-align: left;
      font-size:32rpx;
      font-weight:600;
      // position:absolute;
      // top:5rpx;
      // left:50%;
      // transform: translateX(-50%);
    }
    .close-icon{
      width:21rpx;
      height:21rpx;
      position:absolute;
      top:5rpx;
      right:0;
    }
  }
  .content-box{
    margin:30rpx 0;

  }

  .zan-dialog-show .zan-dialog-mask{
    display: block;
  }
  .zan-dialog-show .zan-dialog-container{
    // transform: translateY(0);
    display: block;
  }
  .tixian-tip{
    font-size:24rpx;
    margin-top:10rpx;
    color:#807F84
  }
  .btn-line{
    display: flex;
    flex-direction: row-reverse;
    margin-top:40rpx;
    .btn{
      padding:10rpx 40rpx;
      border:1px solid #ddd;
      border-radius: 30rpx;
      font-size:28rpx;
      margin-top:30rpx;
    }
    .cancel-btn{
      background-color: #F8F8F8;
      margin-right:20rpx;
    }
    .confirm-btn{
      background-color: #F1A640;
      color:#fff;
    }
  }
}